<template>
  <div class="main" ref="container"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import { ref, reactive, onMounted } from 'vue'
import { useEcharts } from '@/hooks'

import { postTrend } from '@/apis/workbench'

const container = ref(null)
const option = reactive({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    top: '50px',
    left: '70px',
    right: '100px',
    bottom: '60px'
  },
  legend: {
    data: ['作业布置份数', '平均正确率'],
    top: '2%',
    right: '4.5%',
    icon: 'circle',
    itemGap: 52,
    textStyle: {
      fontSize: 16,
      color: '#999'
    }
  },
  xAxis: {
    type: 'category',
    data: [],
    axisLabel: {
      color: '#999',
      fontSize: 14,
      backgroundColor: '#F2F4F9',
      margin: 30,
      width: 100,
      height: 30,
      verticalAlign: 'middle',
      borderRadius: 5,
      interval: 0
    }
  },
  yAxis: [
    {
      type: 'value',
      position: 'left',
      axisLabel: {
        color: '#999',
        formatter: '{value}份'
      },
      splitLine: {
        lineStyle: {
          color: '#eee'
        }
      }
    },
    {
      type: 'value',
      position: 'right',

      axisLabel: {
        color: '#999',
        formatter: value => {
          return value.toFixed(0) + '%'
        }
      },
      splitLine: {
        lineStyle: {
          color: '#eee'
        }
      }
    }
  ],
  series: [
    {
      name: '作业布置份数',
      type: 'bar',
      data: [],
      barWidth: '50%',
      itemStyle: {
        // 使用线性渐变
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#428FFF' },
          { offset: 1, color: '#67C6FF' }
        ]),
        borderColor: 'transparent',
        borderWidth: 0,
        // 上圆角
        barBorderRadius: [10, 10, 0, 0]
      },
      emphasis: {
        focus: 'self',
        itemStyle: {
          // 使用线性渐变
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#428FFF' },
            { offset: 1, color: '#67C6FF' }
          ]),
          borderColor: 'transparent',
          borderWidth: 0
        }
      }
    },
    {
      name: '平均正确率',
      type: 'line',
      yAxisIndex: 1,
      data: [],
      itemStyle: {
        color: '#39DE79'
      },
      lineStyle: {
        width: 2,
        color: '#39DE79'
      },
      emphasis: {
        itemStyle: {
          color: '#39DE79',
          borderColor: '#39DE79',
          borderWidth: 1
        }
      }
    }
  ]
})
// 使用chartInstance要要.value
const { chartInstance } = useEcharts(container, option)
console.log(chartInstance.value)
onMounted(async () => {
  // if (!props.classroomListMap.length || !props.subjectListMap.length) {
  //   return
  // }
  const params = {
    subject_id: []
  }
  const res = await postTrend(JSON.stringify(params))
  // 拿到前9周的数据
  const data = res.data.list.slice(0, 9)
  console.log(data)
  // 拿到x轴数据
  const reverseData = data.reverse()
  const xAxisData = reverseData.map(item => `第${item.week}周`)
  option.xAxis.data = xAxisData
  // 拿到作业布置份数数据
  const barData = reverseData.map(item => item.task_count)
  option.series[0].data = barData
  // 拿到平均正确率数据
  console.log(barData.length)

  const lineData = reverseData.map(item => (item.score_rate * 100).toFixed(2))
  console.log(lineData.length)

  option.series[1].data = lineData
  // 计算Y轴的最大值和最小值
  const barMax = Math.max(...barData)
  const barMin = Math.min(...barData)

  const lineMax = Math.max(...lineData)
  const lineMin = Math.min(...lineData)
  const max = Math.ceil(Math.max(barMax, lineMax))
  const min = Math.min(barMin, lineMin)

  // 双y轴刻度间距动态保持一致
  const interval = Math.ceil((max - min) / 5) // 确保有5个刻度

  option.yAxis[0].max = max
  option.yAxis[0].min = 0 // 可以根据具体需求调整这里
  option.yAxis[0].interval = interval

  option.yAxis[1].max = 100
  option.yAxis[1].min = 0 // 可以根据具体需求调整这里
  option.yAxis[1].interval = 100 / (max / interval)
})
</script>
<style lang="less" scoped>
.main {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background-color: #fff;
}
</style>
